<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" class="logo">
        <img src="@/images/卡通海豚.png" alt="" width="50px" height="60px">
      </el-menu-item>
      <el-menu-item index="2">首页</el-menu-item>
      <el-menu-item index="3">门窗系统介绍</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">行业解决方案</a></el-menu-item>
      <el-menu-item index="5">我要定制</el-menu-item>
      <el-menu-item index="6">成功案例</el-menu-item>
      <el-menu-item index="7">咨询中心</el-menu-item>
      <el-menu-item index="8">关于我们</el-menu-item>

      <el-menu-item index=""></el-menu-item>
      <el-menu-item index=""></el-menu-item>
      <el-menu-item index=""></el-menu-item>
      <el-menu-item index=""></el-menu-item>
      <el-menu-item index=""></el-menu-item>
      <el-menu-item index=""></el-menu-item>

      <el-menu-item index="9" class="address">联系地址</el-menu-item>
      <el-menu-item index="10" class="phoneNumber">热线电话</el-menu-item>
      <el-menu-item index="11">4006651006</el-menu-item>

      <el-menu-item index="12" class="login">
        <span>微信</span>
      </el-menu-item>
    </el-menu>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped lang="less">
.address {
  display: flex;
  align-items: center;
  position: relative;

  &::before {
    content: ''; /* 伪元素的内容为空 */
    position: relative; /* 绝对定位伪元素 */
    left: 0; /* 将伪元素定位到容器的左侧 */
    top: 50%; /* 伪元素的顶部与容器中心对齐 */
    transform: translateY(-50%); /* 向上移动伪元素自身高度的一半，以实现垂直居中 */
    background-image: url('../../images/地址.png'); /* 设置背景图像 */
    background-size: 30px 40px; /* 设置背景图像的大小 */
    width: 30px; /* 伪元素的宽度与背景图像宽度相同 */
    height: 50px; /* 伪元素的高度与背景图像高度相同 */
    background-repeat: no-repeat; /* 确保背景图像不重复 */
  }
}

.phoneNumber {
  display: flex;
  align-items: center; /* 确保内容在交叉轴上的中心对齐 */
  position: relative; /* 为伪元素提供定位上下文 */

  &::before {
    content: ''; /* 伪元素的内容为空 */
    position: relative; /* 绝对定位伪元素 */
    left: 0; /* 将伪元素定位到容器的左侧 */
    top: 50%; /* 伪元素的顶部与容器中心对齐 */
    transform: translateY(-50%); /* 向上移动伪元素自身高度的一半，以实现垂直居中 */
    background-image: url('../../images/电话.png'); /* 设置背景图像 */
    background-size: 30px 40px; /* 设置背景图像的大小 */
    width: 30px; /* 伪元素的宽度与背景图像宽度相同 */
    height: 50px; /* 伪元素的高度与背景图像高度相同 */
    background-repeat: no-repeat; /* 确保背景图像不重复 */
  }
}

.login {
  position: relative;
  display: inline-block;
  text-align: center;

  span {
    position: relative; /* 设置字体的层级位置 */
    z-index: 2; /* 确保文字在伪元素之上 */
    display: block; /* 让文字在一行显示并且占满宽度 */
    margin-top: 16px; /* 调整文字与背景图之间的间距，具体值根据需要调整 */
  }

  &::before {
    content: ''; /* 伪元素的内容为空 */
    position: absolute; /* 绝对定位伪元素 */
    top: 0; /* 将伪元素放置在容器的顶部 */
    left: 54%; /* 根据需要调整左位置 */
    width: 50px; /* 设置伪元素的宽度 */
    transform: translateX(-50%); /* 修正伪元素位置使其水平居中 */
    height: 35px; /* 设置伪元素的高度，与背景图像大小相同 */
    background-image: url('../../images/微信(2).png'); /* 设置背景图像 */
    background-size: 45px 35px; /* 或者使用  根据需要 */
    background-repeat: no-repeat; /* 确保背景图像不重复 */
    z-index: 1;
  }
}
</style>